<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ACE Mermaid-图表可视化设计与编辑平台</title>
    <link rel="stylesheet" href="src/css/common.css">
    <link rel="stylesheet" href="src/css/index.css">

    <!-- 引入mermaid.js库 -->
    <script src="https://cdn.jsdelivr.net/npm/mermaid@11.12.1/dist/mermaid.min.js"></script>

    <!-- 引入Prism.js库 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="src/js/utils/prism-mermaid.js"></script>
</head>

<body>
    <!-- 英雄区域 -->
    <header class="hero-section">
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">ACE Mermaid</h1>
                <p class="hero-subtitle">专业的Mermaid可视化设计与编辑平台，让复杂信息一目了然！</p>
                <div class="hero-cta">
                    <button class="btn-primary" onclick="window.location.href='editor.html'">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path d="M12 5v14M5 12h14M16.5 8.5L12 13L7.5 8.5" />
                        </svg>
                        立即使用
                    </button>
                    <button class="btn-secondary" onclick="openDemosPage()">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
                            <line x1="8" y1="21" x2="16" y2="21" />
                            <line x1="12" y1="17" x2="12" y2="21" />
                        </svg>
                        查看示例
                    </button>
                    <button class="btn-tertiary" onclick="window.location.href='/docs/index.html'">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                            <polyline points="14 2 14 8 20 8" />
                            <line x1="16" y1="13" x2="8" y2="13" />
                            <line x1="16" y1="17" x2="8" y2="17" />
                            <polyline points="10 9 9 9 8 9" />
                        </svg>
                        文档中心
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 图表演示区域 -->
    <section class="demo-section">
        <div class="container">
            <h2 class="section-title">图表演示</h2>
            <p class="section-description">浏览我们支持的各种图表类型，点击查看示例代码和预览效果</p>

            <!-- 图表标签导航 -->
            <div class="tabs-navigation">
                <button class="tab-nav-btn left-nav" id="left-nav-btn">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="15 18 9 12 15 6"></polyline>
                    </svg>
                </button>

                <div class="tabs-container" id="tabs-container">
                    <div class="chart-tabs">
                        <button class="tab-btn active" data-chart="flow">
                            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <rect x="2" y="2" width="20" height="20" rx="2" />
                                <path d="M7 10h10M7 14h10M10 7l4 4-4 4" />
                            </svg>
                            <span>流程图</span>
                        </button>
                        <button class="tab-btn" data-chart="sequence">
                            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
                            </svg>
                            <span>序列图</span>
                        </button>
                        <button class="tab-btn" data-chart="class">
                            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
                                <line x1="8" y1="21" x2="16" y2="21" />
                                <line x1="12" y1="17" x2="12" y2="21" />
                            </svg>
                            <span>类图</span>
                        </button>
                        <button class="tab-btn" data-chart="gantt">
                            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
                                <line x1="8" y1="21" x2="16" y2="21" />
                                <line x1="12" y1="17" x2="12" y2="21" />
                                <rect x="4" y="5" width="2" height="8" />
                                <rect x="8" y="5" width="2" height="10" />
                                <rect x="12" y="5" width="2" height="6" />
                                <rect x="16" y="5" width="2" height="12" />
                            </svg>
                            <span>甘特图</span>
                        </button>
                        <button class="tab-btn" data-chart="pie">
                            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <circle cx="12" cy="12" r="10" />
                                <path d="M12 2 12 12l8 5" />
                            </svg>
                            <span>饼图</span>
                        </button>
                        <button class="tab-btn" data-chart="state">
                            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <circle cx="12" cy="12" r="10" />
                                <circle cx="12" cy="12" r="4" />
                                <line x1="4.93" y1="4.93" x2="9.17" y2="9.17" />
                                <line x1="14.83" y1="14.83" x2="19.07" y2="19.07" />
                                <line x1="14.83" y1="9.17" x2="19.07" y2="4.93" />
                                <line x1="14.83" y1="9.17" x2="18.36" y2="5.64" />
                                <line x1="4.93" y1="19.07" x2="9.17" y2="14.83" />
                            </svg>
                            <span>状态图</span>
                        </button>
                        <button class="tab-btn" data-chart="er">
                            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <circle cx="12" cy="12" r="10" />
                                <line x1="8" y1="16" x2="16" y2="16" />
                                <line x1="8" y1="12" x2="16" y2="12" />
                                <line x1="12" y1="8" x2="12" y2="8" />
                                <line x1="21" y1="5" x2="19" y2="7" />
                                <line x1="21" y1="19" x2="19" y2="17" />
                                <line x1="3" y1="5" x2="5" y2="7" />
                                <line x1="3" y1="19" x2="5" y2="17" />
                            </svg>
                            <span>ER图</span>
                        </button>
                        <button class="tab-btn" data-chart="journey">
                            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <circle cx="6" cy="12" r="2" />
                                <circle cx="12" cy="12" r="2" />
                                <circle cx="18" cy="12" r="2" />
                                <line x1="8" y1="12" x2="10" y2="12" />
                                <line x1="14" y1="12" x2="16" y2="12" />
                                <path d="M12 8v8" />
                            </svg>
                            <span>用户旅程</span>
                        </button>
                        <button class="tab-btn" data-chart="req">
                            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <line x1="12" y1="2" x2="12" y2="6" />
                                <line x1="12" y1="18" x2="12" y2="22" />
                                <line x1="4.93" y1="4.93" x2="7.76" y2="7.76" />
                                <line x1="16.24" y1="16.24" x2="19.07" y2="19.07" />
                                <line x1="2" y1="12" x2="6" y2="12" />
                                <line x1="18" y1="12" x2="22" y2="12" />
                                <line x1="4.93" y1="19.07" x2="7.76" y2="16.24" />
                                <line x1="16.24" y1="7.76" x2="19.07" y2="4.93" />
                            </svg>
                            <span>需求图</span>
                        </button>
                        <button class="tab-btn" data-chart="git">
                            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <circle cx="18" cy="18" r="3" />
                                <circle cx="6" cy="6" r="3" />
                                <path d="M13 6h3a2 2 0 0 1 2 2v7" />
                                <line x1="6" y1="9" x2="6" y2="21" />
                            </svg>
                            <span>Git图</span>
                        </button>
                        <button class="tab-btn" data-chart="mindmap">
                            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <circle cx="12" cy="12" r="2" />
                                <path d="M12 2v8M12 14v8M2 12h8M14 12h8M6 6l4 4M14 14l4 4M6 18l4-4M14 6l4 4" />
                            </svg>
                            <span>思维导图</span>
                        </button>
                        <button class="tab-btn" data-chart="timeline">
                            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <circle cx="12" cy="12" r="10" />
                                <polyline points="12 6 12 12 16 14" />
                            </svg>
                            <span>时间线</span>
                        </button>
                        <button class="tab-btn" data-chart="c4">
                            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <rect x="3" y="3" width="18" height="18" rx="2" />
                                <rect x="7" y="7" width="10" height="10" rx="1" />
                                <line x1="12" y1="7" x2="12" y2="5" />
                                <line x1="12" y1="19" x2="12" y2="17" />
                                <line x1="5" y1="12" x2="7" y2="12" />
                                <line x1="19" y1="12" x2="17" y2="12" />
                            </svg>
                            <span>C4图</span>
                        </button>
                        <button class="tab-btn" data-chart="quadrant">
                            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <line x1="12" y1="2" x2="12" y2="22" />
                                <line x1="2" y1="12" x2="22" y2="12" />
                            </svg>
                            <span>四象限图</span>
                        </button>
                    </div>
                </div>

                <button class="tab-nav-btn right-nav" id="right-nav-btn">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="9 18 15 12 9 6"></polyline>
                    </svg>
                </button>
            </div>

            <!-- 图表展示区域 -->
            <div class="chart-display-container">
                <div class="code-panel">
                    <div class="panel-header">
                        <h3>图表代码</h3>
                        <div class="zoom-controls">
                            <button id="copy-btn" class="zoom-button">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                </svg>
                            </button>
                            <button id="edit-btn" class="zoom-button">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="code-content-wrapper">
                        <textarea id="code-display" class="code-content" readonly></textarea>
                        <div class="code-highlight"><code></code></div>
                    </div>
                </div>

                <div class="preview-panel" id="preview-panel">
                    <div class="panel-header">
                        <h3>图表预览</h3>
                        <div class="zoom-controls">
                            <button id="zoom-out-btn" class="zoom-button">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="8" y1="12" x2="16" y2="12"></line>
                                </svg>
                            </button>
                            <button id="zoom-in-btn" class="zoom-button">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="8" y1="12" x2="16" y2="12"></line>
                                    <line x1="12" y1="8" x2="12" y2="16"></line>
                                </svg>
                            </button>
                            <button id="close-btn" class="zoom-button">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div id="chart-preview" class="chart-preview-container">
                        <!-- 图表将在此处渲染 -->
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 核心功能区域 -->
    <section class="features-section">
        <div class="container">
            <h2 class="section-title">强大功能，尽在掌握</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">📊</div>
                    <h3>14种图表类型</h3>
                    <p>支持流程图、序列图、类图、数据可视化等14种专业图表类型，满足各类需求</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">⚡</div>
                    <h3>实时渲染预览</h3>
                    <p>输入代码即时查看效果，所见即所得，让图表设计更加高效直观</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🤖</div>
                    <h3>AI辅助创作</h3>
                    <p>智能AI辅助生成图表代码，从文本描述到完整图表，大幅提升创作效率</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🎨</div>
                    <h3>丰富样式定制</h3>
                    <p>支持多种主题和样式配置，让您的图表既专业又美观，符合品牌调性</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔄</div>
                    <h3>团队协作</h3>
                    <p>多人实时协作编辑图表，版本管理和评论功能，提升团队工作效率</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📤</div>
                    <h3>多格式导出</h3>
                    <p>支持SVG、PNG、PDF等多种格式导出，高质量输出，适配各种场景需求</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer-section">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <a href="index.html">
                        <h2>ACE图表</h2>
                        <p>专业图表设计平台</p>
                    </a>
                </div>
                <div class="footer-links">
                    <div class="footer-column">
                        <h4>产品</h4>
                        <ul>
                            <li><a href="index.html">首页</a></li>
                            <li><a href="demos.html">案例展示</a></li>
                            <li><a href="docs/index.html#/features">功能介绍</a></li>
                        </ul>
                    </div>
                    <div class="footer-column">
                        <h4>资源</h4>
                        <ul>
                            <li><a href="/docs/index.html#/quickstart">快速开始</a></li>
                            <li><a href="/docs/index.html">文档中心</a></li>
                            <li><a href="/docs/index.html#/api">API参考</a></li>
                            <li><a href="/docs/index.html#/development">开发指南</a></li>
                        </ul>
                    </div>
                    <div class="footer-column">
                        <h4>关于我们</h4>
                        <ul>
                            <li><a href="#">公司介绍</a></li>
                            <li><a href="#">联系方式</a></li>
                            <li><a href="#">招聘信息</a></li>
                            <li><a href="#">隐私政策</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 ACE Mermaid. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="data/index-charts.js"></script>
    <script type="module" src="src/js/index.js"></script>
    <script type="module" src="src/js/main.js"></script>
    <script>
        // 打开编辑器函数
        function openEditorWithCode(code) {
            const encodedCode = encodeURIComponent(code);
            window.location.href = `editor.html?code=${encodedCode}`;
        }

        // 为编辑按钮添加事件监听
        document.addEventListener('DOMContentLoaded', () => {
            // 添加立即使用按钮
            const headerRight = document.querySelector('.header-right');
            if (headerRight) {
                const editorBtn = document.createElement('button');
                editorBtn.className = 'btn editor-btn';
                editorBtn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg> 编辑器';
                editorBtn.onclick = () => window.location.href = 'editor.html';
                headerRight.appendChild(editorBtn);
            }

            // 为现有编辑按钮添加事件
            setTimeout(() => {
                const editButtons = document.querySelectorAll('.edit-btn');
                editButtons.forEach(btn => {
                    btn.onclick = function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                        const codeBlock = this.closest('.chart-item')?.querySelector('.chart-code');
                        if (codeBlock) {
                            const code = codeBlock.textContent;
                            openEditorWithCode(code);
                        }
                    };
                });
            }, 1000);
        });
    </script>
</body>

</html>